<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统</title>
    <meta charset="utf-8">
    <!-- 引入Bootstrap CSS样式 -->
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"></link>
    <!-- 引入自定义CSS样式 -->
    <link rel="stylesheet" href="/css/mycss.css" type="text/css"></link>
    <!-- 引入jQuery库 -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- 引入Bootstrap JavaScript -->
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <!-- 引入Bootstrap Validator插件用于表单验证 -->
    <script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>
    <!-- 页面加载时执行的JavaScript代码，配置bootstrapValidator -->
    <script>
        $(function(){
            //客户端表单校验，使用bootstrapValidator插件
            $('#frmLogin').bootstrapValidator({
                feedbackIcons:{  /* 验证状态图标 */
                    valid:'glyphicon glyphicon-ok',
                    invalid:'glyphicon glyphicon-remove',
                    validating:'glyphicon glyphicon-refresh'
                },
                fields:{ /* 字段验证规则 */
                    code:{/* 错误的字段名，应与表单中的name属性对应，应为'username' */
                        validators:{
                            notEmpty:{
                                message:'用户名不能为空'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            }
                        }
                    }
                }
            });
        });
    </script>

</head>
<body>
<!-- 页面主体内容容器 -->
<!-- 使用自定义css样式 div-signin 完成元素居中-->
<div class="container div-signin">
    <!-- 登录面板 -->
    <div class="panel panel-primary div-shadow">
        <!-- 面板头部 -->
        <!-- h3标签加载自定义样式，完成文字居中和上下间距调整 -->
        <div class="panel-heading">
            <h3>图书管理系统</h3>
            <span>Library Management System</span>
        </div>
        <!-- 面板主体内容 -->
        <div class="panel-body">
            <!-- 登录表单 -->
            <!-- login form start -->
            <form action="/login" class="form-horizontal" method="post" id="frmLogin">
                <div class="form-group">
                    <!-- 显示错误消息 -->
                    <p th:text="${msg}" style="color: red;margin-left: 40px"></p>
                    <!-- 用户名输入框 -->
                    <label class="col-sm-3 control-label">用户名：</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="请输入用户名" name="username">
                    </div>
                </div>
                <!-- 密码输入框 -->
                <div class="form-group">
                    <label class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="password" placeholder="请输入密码" name="password">
                    </div>
                </div>
                <!-- 用户类型选择 -->
                <div class="form-group">
                    <label class="col-sm-3 control-label">身&nbsp;&nbsp;&nbsp;&nbsp;份：</label>
                    <div class="col-sm-9">
                        <select class="form-control" name="type">
                            <option value="0">-请选择身份-</option>
                            <option value="1">普通用户</option>
                            <option value="2">管理员</option>
                            <option value="3">系统管理员</option>
                        </select>
                    </div>
                </div>
                <!-- 登录与重置按钮 -->
                <div class="form-group">
                    <div class="col-sm-3">
                    </div>
                    <div class="col-sm-9 padding-left-0">
                        <div class="col-sm-4">
                            <button type="submit" class="btn btn-primary btn-block">登&nbsp;&nbsp;陆</button>
                        </div>
                        <div class="col-sm-4">
                            <button type="reset" class="btn btn-primary btn-block">重&nbsp;&nbsp;置</button>
                        </div>
                    </div>
                </div>
            </form>
            <!-- login form end -->
        </div>
    </div>
</div>
<!-- 页脚版权信息 -->
<div class="container">
    <div class="col-sm-12 foot-css">
        <p class="text-muted credit">
        </p>
    </div>
</div>
</body>
</html>